<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令：英雄列表</title>
<style>
  body {
      font-family: sans-serif;
  }

  #container {
      max-width: 900px;
      margin: 30px auto;
  }

  .search-form {
      margin-bottom: 20px;
      display: flex;
      gap: 10px;
      align-items: center;
  }

  .search-form input,
  .search-form select {
      flex: 1;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
  }

  .search-form button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
  }

  .search-form button.clear {
      background-color: #6c757d;
  }

  .table {
      width: 100%;
      border-collapse: collapse;
  }

  .table th,
  .table td {
      border: 1px solid #e0e0e0;
      padding: 15px;
      text-align: center;
      vertical-align: middle;
  }

  .avatar {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 50%;
  }
</style>
<script type="importmap">
  {
      "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
  }
</script>
</head>

<body>

<div id="container">
  <h1>超级英雄名册</h1>

  <form class="search-form">
      <input type="text" placeholder="英雄名..." v-model="searchQuery.name" />

      <select v-model="searchQuery.publisher">
          <option value="">所有阵营</option>
          <option value="Marvel">漫威</option>
          <option value="DC">DC</option>
      </select>
      <button type="button" @click="search">筛选</button>
      <button type="button" @click="clear" class="clear">重置</button>
  </form>

  <table class="table">
      <thead>
          <tr>
              <th>英雄名</th>
              <th>头像</th>
              <th>真名</th>
              <th>阵营</th>
              <th>首次登场</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for="hero in heroList" :key="hero.id">
              <td>{{ hero.name }}</td>
              <td><img :src="hero.image" class="avatar"></td>
              <td>{{ hero.alias }}</td>
              <td>
                  <span v-if="hero.publisher === 'Marvel'">漫威</span>
                  <span v-else-if="hero.publisher === 'DC'">DC</span>
                  <span v-else>独立</span>
              </td>
              <td>{{ hero.firstAppearance }}</td>
          </tr>
      </tbody>
  </table>
</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
      data() {

          return {
              // 用于绑定筛选表单的数据
              searchQuery: {
                  name: '',
                  publisher: '' // 'Marvel', 'DC', 或者 '' 代表全部
              },
              heroList: [
                  { id: 101, name: '钢铁侠', alias: '托尼·斯塔克', image: 'https://s2.loli.net/2025/06/18/pCZq31ouRv6IMYb.png', publisher: 'Marvel', firstAppearance: 'Tales of Suspense #39 (1963)' },
                  { id: 102, name: '超人', alias: '克拉克·肯特', image: 'https://s2.loli.net/2025/06/18/mrKD6j5q1oeLawS.png', publisher: 'DC', firstAppearance: 'Action Comics #1 (1938)' },
                  { id: 103, name: '蜘蛛侠', alias: '彼得·帕克', image: 'https://s2.loli.net/2025/06/18/rNecjDA1Igubfpw.png', publisher: 'Marvel', firstAppearance: 'Amazing Fantasy #15 (1962)' }
              ]
          }
      },
      methods: {
          search() {
              alert(`开始筛选: 英雄名=${this.searchQuery.name}, 阵营=${this.searchQuery.publisher}`);
          },
          // 重置按钮的点击事件处理函数
          clear() {
              this.searchQuery.name = '';
              this.searchQuery.publisher = '';
          }
      }
  }).mount('#container')
</script>
</body>

</html>